<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor IDE 远程开发完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
            flex-shrink: 0;
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(to right, transparent, #e5e7eb, transparent);
            margin: 3rem 0;
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .highlight-box {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            border-left: 4px solid #667eea;
            padding: 1.5rem;
            border-radius: 0 8px 8px 0;
            margin: 1.5rem 0;
        }
        .image-container {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin: 2rem 0;
        }
        .image-container img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <div class="floating-icon inline-block mb-6">
                <i class="fas fa-server text-6xl opacity-80"></i>
            </div>
            <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">
                Cursor IDE 远程开发完全指南
            </h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                掌握远程服务器开发的艺术，释放云端计算的无限潜能
            </p>
            <div class="mt-10 flex justify-center space-x-8 text-sm">
                <div class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    <span>阅读时间：15分钟</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-tag mr-2"></i>
                    <span>远程开发 · DevOps</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-6">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 card-hover">
                <p class="text-lg leading-relaxed text-gray-700 first-letter:text-6xl first-letter:font-bold first-letter:text-purple-600 first-letter:float-left first-letter:mr-3">
                    在软件开发的新纪元，远程服务器开发已成为提升效率的关键策略。通过远程连接服务器进行代码编写和环境配置，开发者可以充分利用服务器的强大计算资源，同时避免本地环境配置的复杂性。本文将带您深入探索如何使用 Cursor IDE 连接 CentOS 远程服务器，完成从环境配置到项目部署的全流程实践。
                </p>
            </div>
        </div>
    </section>

    <!-- Workflow Visualization -->
    <section class="py-12 px-6 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">开发流程全景图</h2>
            <div class="mermaid">
                graph LR
                    A[本地 Cursor IDE] -->|SSH连接| B[远程服务器]
                    B --> C[环境配置]
                    C --> D[代码开发]
                    D --> E[Git版本控制]
                    E --> F[自动部署]
                    F --> G[线上服务]
                    
                    style A fill:#667eea,stroke:#fff,color:#fff
                    style G fill:#764ba2,stroke:#fff,color:#fff
            </div>
        </div>
    </section>

    <div class="section-divider"></div>

    <!-- Main Content -->
    <main class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            
            <!-- Section 1: Install Remote-SSH -->
            <section class="mb-16">
                <div class="flex items-center mb-8">
                    <div class="step-number mr-4">1</div>
                    <h2 class="text-3xl font-bold">安装 Remote-SSH 插件</h2>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="space-y-4">
                        <div class="bg-white rounded-lg p-6 shadow-md card-hover">
                            <h3 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-puzzle-piece text-purple-600 mr-2"></i>
                                插件安装步骤
                            </h3>
                            <ol class="space-y-3 text-gray-700">
                                <li class="flex items-start">
                                    <span class="text-purple-600 font-bold mr-2">1.</span>
                                    打开 Cursor IDE
                                </li>
                                <li class="flex items-start">
                                    <span class="text-purple-600 font-bold mr-2">2.</span>
                                    点击左侧活动栏的扩展图标（快捷键 <code class="bg-gray-100 px-2 py-1 rounded">Ctrl+Shift+X</code>）
                                </li>
                                <li class="flex items-start">
                                    <span class="text-purple-600 font-bold mr-2">3.</span>
                                    搜索 "Remote-SSH"
                                </li>
                                <li class="flex items-start">
                                    <span class="text-purple-600 font-bold mr-2">4.</span>
                                    点击 "Install" 安装插件
                                </li>
                                <li class="flex items-start">
                                    <span class="text-purple-600 font-bold mr-2">5.</span>
                                    重启 Cursor 激活插件
                                </li>
                            </ol>
                        </div>
                    </div>
                    
                    <div class="image-container">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1749393040983-d6246433-f105-470e-9808-c2162d0751d1.png" alt="Remote-SSH插件安装">
                    </div>
                </div>
                
                <div class="highlight-box mt-8">
                    <p class="text-gray-700">
                        <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                        <strong>提示：</strong>安装完成后，左侧活动栏会出现远程资源管理器图标，这是您通往远程开发世界的大门。
                    </p>
                </div>
            </section>

            <!-- Section 2: Connect to Server -->
            <section class="mb-16">
                <div class="flex items-center mb-8">
                    <div class="step-number mr-4">2</div>
                    <h2 class="text-3xl font-bold">连接远程服务器</h2>
                </div>

                <div class="bg-white rounded-2xl shadow-lg p-8">
                    <h3 class="text-xl font-semibold mb-6 flex items-center">
                        <i class="fas fa-key text-purple-600 mr-3"></i>
                        使用密码认证连接
                    </h3>
                    
                    <div class="space-y-6">
                        <div class="flex items-start space-x-4">
                            <div class="bg-purple-100 rounded-full p-3">
                                <i class="fas fa-mouse-pointer text-purple-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium mb-2">点击左下角状态栏，选择 "Remote-SSH: Connect to Host..."</p>
                                <div class="image-container max-w-md">
                                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1749393795193-1486f81d-dcb7-41b5-a832-59ab8fa988ab.png" alt="连接选项">
                                </div>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="bg-purple-100 rounded-full p-3">
                                <i class="fas fa-plus text-purple-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium mb-2">添加新的 SSH 主机</p>
                                <div class="code-block">
                                    ssh username@server_ip
                                </div>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="bg-purple-100 rounded-full p-3">
                                <i class="fas fa-check text-purple-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-medium">输入密码并选择工作目录</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-8 bg-white rounded-2xl shadow-lg p-8">
                    <h3 class="text-xl font-semibold mb-6 flex items-center">
                        <i class="fas fa-shield-alt text-purple-600 mr-3"></i>
                        使用公钥认证连接（推荐）
                    </h3>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 rounded-lg p-6">
                            <h4 class="font-semibold mb-3">生成 SSH 密钥对</h4>
                            <div class="code-block text-sm">
                                ssh-keygen -t rsa -b 4096
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 rounded-lg p-6">
                            <h4 class="font-semibold mb-3">复制公钥到服务器</h4>
                            <div class="code-block text-sm">
                                ssh-copy-id username@server_ip
                            </div>
                        </div>
                    </div>
                    
                    <p class="mt-6 text-gray-600">
                        <i class="fas fa-info-circle mr-2"></i>
                        使用公钥认证后，无需每次输入密码，更加安全便捷。
                    </p>
                </div>
            </section>

            <!-- Section 3: Java Environment -->
            <section class="mb-16">
                <div class="flex items-center mb-8">
                    <div class="step-number mr-4">3</div>
                    <h2 class="text-3xl font-bold">Java 环境配置</h2>
                </div>

                <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-2xl p-8">
                    <div class="flex items-center mb-6">
                        <i class="fab fa-java text-4xl text-purple-600 mr-4"></i>
                        <div>
                            <h3 class="text-xl font-semibold">智能化环境配置</h3>
                            <p class="text-gray-600">使用 Cursor 的 AI 能力，自然语言即可完成配置</p>
                        </div>
                    </div>
                    